<template>
  <button 
    class="custom-button" 
    :class="{ 'disabled': !isEnabled }"
    :disabled="!isEnabled"
    @click="handleClick"
  >
    {{ buttonText }}
  </button>
</template>

<script setup>
const props = defineProps({
  buttonText: {
    type: String,
    required: true,
    default: '按钮'
  },
  isEnabled: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
  if (props.isEnabled) {
    emit('click', event)
  }
}
</script>

<style scoped>
.custom-button {
  /* padding: 4px 12px;  调整内边距以适应新的尺寸 */
  border-radius: 6px;
  border: none;
  font-size: 12px;  /* 修改字体大小为12px */
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #9dbce3;  /* 新的默认蓝色 */
  color: rgba(255, 255, 255, 1);  /* 纯白色，不透明 */
  width: 72px;  /* 固定宽度 */
  height: 26px;  /* 固定高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SourceHanFont";
}

.custom-button:hover:not(.disabled) {
  background-color: #b3cdf0;  /* 悬浮时稍微亮一点的蓝色 */
}

.custom-button:active:not(.disabled) {
  background-color: #87a8d6;  /* 点击时深蓝色 */
}

.custom-button.disabled {
  background-color: #9a9a9a;  /* 新的禁用灰色 */
  cursor: not-allowed;
  color: rgba(255, 255, 255, 1);  /* 禁用状态也使用纯白色 */
}
</style>
